参考链接 ：https://www.cnblogs.com/oloroso/p/5407779.html **本次IMX6上用的版本是5.6.0，配置为：** ./configure \ -v \ -debug-and-release \ -prefix /home/zhang/qt5.6/equipment/qt5.6.0 \ -opensource \ -confirm-license \ -make libs \ -linuxfb \ -pch \ -qt-sql-sqlite \ -qt-zlib \ -qt-libpng \ -qt-libjpeg \ -xplatform linux-arm-imx6-g++ \ -qt-freetype \ -c++std c++98 \ -no-xcb \ -no-opengl \ -no-sse2 \ -no-openssl \ -no-nis \ -no-cups \ -no-glib \ -no-dbus \ -no-iconv \ -no-compile-examples \ -tslib **qmake.conf的内容为：** //# //# qmake configuration for building with arm-linux-gnueabi-g++ // MAKEFILE_GENERATOR = UNIX CONFIG += incremental QMAKE_INCREMENTAL_STYLE = sublib include(../common/linux.conf) include(../common/gcc-base-unix.conf) include(../common/g++-unix.conf) //#QMAKE_INCDIR += /home/gcp/qt_ARM/tslib/_install/include //#QMAKE_LIBDIR += /home/gcp/qt_ARM/tslib/_install/lib QMAKE_INCDIR += /home/zhang/nari/imx6/tslib_lwx/__install/include QMAKE_LIBDIR += /home/zhang/nari/imx6/tslib_lwx/__install/lib //# modifications to g++.conf QMAKE_CC = arm-fsl-linux-gnueabi-gcc QMAKE_CXX = arm-fsl-linux-gnueabi-g++ QMAKE_LINK = arm-fsl-linux-gnueabi-g++ QMAKE_LINK_SHLIB = arm-fsl-linux-gnueabi-g++ //# modifications to linux.conf QMAKE_AR = arm-fsl-linux-gnueabi-ar cqs QMAKE_OBJCOPY = arm-fsl-linux-gnueabi-objcopy QMAKE_NM = arm-fsl-linux-gnueabi-nm -P QMAKE_STRIP = arm-fsl-linux-gnueabi-strip load(qt_config) **如果发生xcbde 缺少的问题的话：** 查看/qtbase/src/plugins/platforms/xcb/README 更新一下： sudo apt-get install "^libxcb.*" libx11-xcb-dev libglu1-mesa-dev libxrender-dev 或者 sudo apt-get install libxcb1 libxcb1-dev libx11-xcb1 libx11-xcb-dev libxcb-keysyms1 libxcb-keysyms1-dev libxcb-image0 libxcb-image0-dev libxcb-shm0 libxcb-shm0-dev libxcb-icccm4 libxcb-icccm4-dev libxcb-sync1 libxcb-sync-dev libxcb-xfixes0-dev libxrender-dev libxcb-shape0-dev libxcb-randr0-dev libxcb-glx0-dev libxcb-xinerama0-dev **然后make&make install** **设置板子上的配置为：** export TSLIB_ROOT=/usr/local/tslib export TSLIB_CONFFILE=$TSLIB_ROOT/etc/ts.conf export TSLIB_PLUGINDIR=$TSLIB_ROOT/lib/ts export TSLIWS_FBDEVICE=/dev/fb0 export TSLIB_TSDEVICE=/dev/input/event0 export TSLIB_CALIBFILE=/etc/pointercal export TSLIB_CONSOLEDEVICE=none export POINTERCAL_FILE=/etc/pointercal export QTDIR=/usr/qt export QT_QPA_FONTDIR=$QTDIR/lib/fonts/ export QT_QPA_PLATFORM=LinuxFb:/dev/fb0 export QT_QPA_PLATFORM_PLUGIN_PATH=$QTDIR/plugins/ export QT_QPA_GENERIC_PLUGINS=Tslib:/dev/input/event0 export PATH=$QTDIR/bin:$PATH export LD_LIBRARY_PATH=/lib:$QTDIR/lib:$TSLIB_ROOT/lib:$LD_LIBRARY_PATH **运行./hello程序查看结果**

下载链接：http://www.qcustomplot.com/index.php/download 博主使用的是1.3.2的版本，最新的2.0的版本中有很多的东西已经更新，官方的使用说明存在出入，所以此次使用的是1.3.2的版本。 将下载好的文件解压，qcustomplot.cpp 和qcustomplot.h这两个文件，放入我们创建的工程里面。 下载的解压文件中有相应的example。可以先查看相应的PLOTS的工程文件。在QT中打开项目工程plot-examples.pro，进行查看可编译。 在自己创建的工程中： customPlot = new QCustomPlot(); QVBoxLayout *vbox = new QVBoxLayout(); vbox->addWidget(customPlot); vbox->setSpacing(0); vbox->setContentsMargins(0,0,0,0); 先设置一下控件，以及设置布局方式。 customPlot->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom | QCP::iSelectAxes | QCP::iSelectLegend | QCP::iSelectPlottables); 这部分是设置鼠标点击，鼠标滑轮，区域设置，标题设置等，可选的设置。 customPlot->setInteractions(QCP::iSelectLegend); //设置折线等的设置 customPlot->axisRect()->setupFullAxesBox(); //区域填充满坐标轴 customPlot->legend->setVisible(true); //折现描述的区域模块显示 QFont legendFont = font(); legendFont.setPointSize(20); //设置字体大小 customPlot->legend->setFont(legendFont); customPlot->xAxis->setTickLabelFont(legendFont); customPlot->yAxis->setTickLabelFont(legendFont); //设置XY轴字体大小 // 设置xy轴内的模式： customPlot->addGraph(); customPlot->graph()->setLineStyle((QCPGraph::LineStyle::lsLine)); // 设置线的模式 customPlot->graph()->setScatterStyle(QCPScatterStyle::ScatterShape::ssDisc); //设置线的节点的 QPen graphPen; graphPen.setColor(QColor(Qt::red)); graphPen.setWidthF(3); customPlot->graph()->setPen(graphPen); //设置线的颜色，宽度，以及画笔 customPlot->xAxis->setRange(0, 10); customPlot->xAxis->setAutoTickStep(false); customPlot->xAxis->setTickStep(3); customPlot->xAxis->setAutoSubTicks(false); customPlot->xAxis->setSubTickCount(3-1); customPlot->yAxis->setRange(0, 5); customPlot->yAxis->setAutoTickStep(false); customPlot->yAxis->setTickStep(1); // customPlot->yAxis->setSubTickCount(1); customPlot->xAxis->setLabel("x_str"); customPlot->yAxis->setLabel("y_str"); //设置X轴和Y轴的范围 //设置XY轴的间隔的时候，需要先把自动设置间隔的关闭，然后手动设置。 //XY轴的标签也需要设置名称。 QVector x, y; y << 0<< 2 << 3 << 5 << 7 << 3 << 8 << 2<<5; x <<0<< 3<< 6 << 9 << 12 << 15 << 18 << 21 <<24; customPlot->graph()->setData(x, y); customPlot->replot(); 设置数据的时候，需要用到QVector，然后将数据存入，一个一个的显示。 在调用完之后需要使用customPlot->replot();将数据更新到坐标轴上去。

首先自定义QSlider的子类MyCustomSlider，如下所示。 mycustomslider.h #ifndef MYCUSTOMSLIDER_H #define MYCUSTOMSLIDER_H #include “QSlider” #include “QLabel” #include “QMouseEvent” class MyCustomSlider : public QSlider { public: MyCustomSlider(QWidget *parent=0); ~MyCustomSlider(); protected: virtual void mousePressEvent(QMouseEvent *event); virtual void mouseReleaseEvent(QMouseEvent *event); virtual void mouseMoveEvent(QMouseEvent *event); private: QLabel* m_displayLabel; }; #endif // MYCUSTOMSLIDER_H mycustomslider.cpp #include "mycustomslider.h" #include “QPalette” MyCustomSlider::MyCustomSlider(QWidget *parent):QSlider(parent) { m_displayLabel=new QLabel(this); m_displayLabel->setFixedSize(QSize(20,20)); //设置游标背景为白色 m_displayLabel->setAutoFillBackground(true); QPalette palette; palette.setColor(QPalette::Background, Qt::white); m_displayLabel->setPalette(palette); m_displayLabel->setAlignment(Qt::AlignCenter); m_displayLabel->setVisible(false); m_displayLabel->move(0,3); } MyCustomSlider::~MyCustomSlider() { } void MyCustomSlider::mousePressEvent(QMouseEvent *event) { if(!m_displayLabel->isVisible()) { m_displayLabel->setVisible(true); m_displayLabel->setText(QString::number(this->value())); } QSlider::mousePressEvent(event); } void MyCustomSlider::mouseReleaseEvent(QMouseEvent *event) { if(m_displayLabel->isVisible()) { m_displayLabel->setVisible(false); } QSlider::mouseReleaseEvent(event); } void MyCustomSlider::mouseMoveEvent(QMouseEvent *event) { m_displayLabel->setText(QString::number(this->value())); m_displayLabel->move((this->width()-m_displayLabel->width())*this->value()/(this->maximum()-this->minimum()),3); QSlider::mouseMoveEvent(event); }

QRadioButton是什么？ 　　QRadioButton是一个可以switch on或off的按钮，对应的状态为checked和unchecked。一组QRadioButton通常用于表示程序中“多选一”的选择，例如单项选择题。在一组radio buttons中，同一时刻只能有一个button处于checked状态，如果用户选择了其他button，原先被选中的button将变为unchecked。 　　和QpushButton一样，QRadioButton类提供了一个text label和一个small icon，其中text可以在构造函数中设置，也可以通过setText()方法设置，但是icon只能通过setIcon()方法设置，还可以通过在text中某个字母前加“&”符号来指定快捷键，例如： QRadioButton *button = new QRadioButton("Search from the &cursor", this); 1 上面例子的快捷键为“Alt + c”。 分组 　　上面其实已经提到过，“同一个父窗体”或“一个button group”，这就是分组。如果没有进行分组，则默认拥有相同父窗体的radio buttons都将具有相互排他性，所以如果你想在一个窗体中表达多组radio buttons的效果，需要显式地对它们进行分组，可以使用QGroupBox或者QButtonGroup。建议使用QButtonGroup，因为它仅仅是一个容器，不会有任何视觉表现，并且对于包含在它里面的子buttons，QButtonGroup提供比QGroupBox方便的信号槽操作。 信号 　　QRadioButton的信号继承自QAbstractButton，一般我们比较关注的是toggled()和clicked()， 　　需要注意的是，radio button无论是被switch on还是off，它都会发送一个toggled(bool)信号，其中包含一个bool型参数用于记录此次发生的是被switch on还是off，所以如果你想根据radio button的状态变化来处理一些事的话，就需要connect它们。 　　当然，如果组内有很多个radio buttons，并且你又想跟踪toggled或clicked的状态，你不需要一个个来connect，因为一旦使用QButtonGroup来管理，完全可以用buttonToggled()和buttonClicked()来处理组内所有buttons的toggled()和clicked()信号。 方法 　　在QButtonGroup中添加一个button可以使用addButton()方法，删除一个button可以使用removeButton()方法。如果这个button group是exclusive的，还可以通过checkedButton()方法来找到当前处于checked状态的button。可以通过button()方法找到该button group中的某一个button，以及通过buttons()方法获得该button group中的buttons列表。 属性 　　接下来，我们需要关注一个名为autoExclusive的bool型属性，它是QAbstractButton类的属性，该属性用于控制一个button是否具有排他性（auto-exclusivity），可以通过autoExclusive() 方法进行查询，通过setAutoExclusive(bool)方法进行设置。 　　如果autoExclusive为true，属于同一个父窗体的所有checkable按钮的行为将表现得与它们被放在一个exclusive的button group中一样，任何时刻都只能有一个按钮处于checked状态。不过别担心， autoExclusive属性的缺省值为false（除了QRadioButton）。 　　还要注意的是，如果buttons已经放在了一个button group，那么autoExclusive属性将失效。 　　QButtonGroup默认是exclusive的，所以只要它的组内的所有buttons是checkable的，不管是不是QRadioButton，都将表现得与QRadioButton一样。最后如果你创建了一个exclusive的button group，最好为它设置一个初选项，否则组内将没有任何一个button被选中，这不太符合“one of many”的设计吧。 示例 　　以下示例代码，包括普通QRadioButton的用法以及用QToolButton模拟的单选按钮组，相关代码解释请看注释。（因为QRadioButton只提供了一个small icon，但是我们希望可以更加个性化，所以尝试用QToolButton来实现） 　　 【mainwidget.h】文件 #ifndef MAINWIDGET_H #define MAINWIDGET_H #include “QWidget” #include “QRadioButton” #include “QButtonGroup” #include “QToolButton” #include “QLabel” class MainWidget : public QWidget { Q_OBJECT public: MainWidget(QWidget *parent = 0); ~MainWidget(); // 设备操作模式类型（用于表示普通QButtonGroup） typedef enum { OM_Auto, OM_Manual, OM_ManualFullSpeed }operatingModeTypes; // 动物选项类型（用于表示QToolButton模拟的单选按钮） typedef enum { AN_PIG, AN_MONKEY, AN_CAT }animalTypes; private slots: void operatingModeButtonsToggled(int, bool); void operatingModeButtonsClicked(int); void customButtonsToggled(int, bool); void customButtonsClicked(int); private: // 设备操作模式组 QButtonGroup *operatingModeGroup; QRadioButton *autoBtn; QRadioButton *manualBtn; QRadioButton *manualFullSpeedBtn; // 电源开关组 QButtonGroup *powerGroup; QRadioButton *powerOnBtn; QRadioButton *powerOffBtn; // 动物选项组 QButtonGroup *customGroup; QStringList animalStrList; // 记录动物名称 QLabel *curAnimalLabel; // 显式当前选中的动物名称 }; #endif // MAINWIDGET_H 【mainwidget.cpp】文件 #include "mainwidget.h" #include “QVBoxLayout” #include “QHBoxLayout” // 保存customGroup中checked和unchecked按钮的样式 QString toolBtnCheckedStyleSheet("border-style: solid; background-color: LightGray;"); QString toolBtnUncheckedStyleSheet("border-style: solid; background-color: transparent;"); MainWidget::MainWidget(QWidget *parent) : QWidget(parent) { setWindowTitle(tr("QRadioButtonTest")); setFixedSize(400, 300); autoBtn = new QRadioButton(tr("Auto")); manualBtn = new QRadioButton(tr("Manual")); manualFullSpeedBtn = new QRadioButton(tr("Manual Full Speed")); operatingModeGroup = new QButtonGroup(this); operatingModeGroup->addButton(autoBtn, OM_Auto); operatingModeGroup->addButton(manualBtn, OM_Manual); operatingModeGroup->addButton(manualFullSpeedBtn, OM_ManualFullSpeed); autoBtn->setChecked(true); // 为operatingModeGroup组设置初选项 powerOnBtn = new QRadioButton(tr("Power ON")); powerOnBtn->setIcon(QIcon(":/images/power_on.png")); powerOffBtn = new QRadioButton(tr("Power OFF")); powerOffBtn->setIcon(QIcon(":/images/power_off.png")); powerGroup = new QButtonGroup(this); powerGroup->addButton(powerOnBtn); powerGroup->addButton(powerOffBtn); powerOffBtn->setChecked(true); // 为powerGroup组设置初选项 QSize size(100, 100); animalStrList<<"pig"<<"monkey"<<"cat"; customGroup = new QButtonGroup(this); customGroup->setExclusive(true); curAnimalLabel = new QLabel; QHBoxLayout *customBtnBarLayout = new QHBoxLayout; for(int i=0; i<3; i++) { QToolButton *customBtn = new QToolButton; customGroup->addButton(customBtn, AN_PIG+i); // 将自定义的button加入customGroup中，并为其设置id customBtn->setToolButtonStyle(Qt::ToolButtonTextUnderIcon); //文字处于图片下方 QPixmap pixmap(QString(":/images/%1.jpg").arg(animalStrList.at(i))); customBtn->setIcon(pixmap); // 为按钮设置图标 customBtn->setIconSize(size); // 设置图片大小 customBtn->setFixedSize(size.width()+30, size.height()+30); // 设置按钮大小 customBtn->setText(animalStrList.at(i)); // 设置提示文字 customBtn->setCheckable(true); customBtn->setChecked(false); customBtn->setStyleSheet(toolBtnUncheckedStyleSheet); // 所有按钮初始状态为unchecked customBtnBarLayout->addWidget(customBtn); // 添加到布局 } customGroup->button(AN_PIG)->setChecked(true); // 为customGroup组设置初选项 customGroup->button(AN_PIG)->setStyleSheet(toolBtnCheckedStyleSheet); // 修改被checked按钮的样式 curAnimalLabel->setText(QString(tr("当前选择："))+animalStrList.at(customGroup->checkedId())); // 创建布局 QVBoxLayout *mainLayout = new QVBoxLayout; mainLayout->addWidget(autoBtn); mainLayout->addWidget(manualBtn); mainLayout->addWidget(manualFullSpeedBtn); mainLayout->addStretch(); mainLayout->addWidget(powerOnBtn); mainLayout->addWidget(powerOffBtn); mainLayout->addStretch(); mainLayout->addWidget(curAnimalLabel); mainLayout->addLayout(customBtnBarLayout); setLayout(mainLayout); // 连接信号 connect(operatingModeGroup, SIGNAL(buttonToggled(int,bool)), this, SLOT(operatingModeButtonsToggled(int,bool))); connect(operatingModeGroup, SIGNAL(buttonClicked(int)), this, SLOT(operatingModeButtonsClicked(int))); connect(customGroup, SIGNAL(buttonClicked(int)), this, SLOT(customButtonsClicked(int))); connect(customGroup, SIGNAL(buttonToggled(int,bool)), this, SLOT(customButtonsToggled(int,bool))); } MainWidget::~MainWidget() { } void MainWidget::operatingModeButtonsToggled(int id, bool status) { int tmp = operatingModeGroup->checkedId(); QString str = operatingModeGroup->checkedButton()->text(); QByteArray byteArray = str.toLocal8Bit(); qDebug("flag = %d, status = %d, tmp = %d, checked = %s", id, status, tmp, byteArray.data()); } void MainWidget::operatingModeButtonsClicked(int id) { qDebug("Clicked: %d", id); } void MainWidget::customButtonsToggled(int id, bool state) { if(state == false) { // 修改被unchecked按钮的样式 customGroup->button(id)->setStyleSheet(toolBtnUncheckedStyleSheet); }else { // 修改被checked按钮的样式 customGroup->checkedButton()->setStyleSheet(toolBtnCheckedStyleSheet); } } void MainWidget::customButtonsClicked(int id) { curAnimalLabel->setText(QString(tr("当前选择："))+animalStrList.at(id)); }

构造一个复选框QCheckBox，然后使用setTristate()开启三态模式。 QCheckBox *pCheckBox = new QCheckBox(this); m_pLabel = new QLabel(this); m_pLabel->setText("Click CheckBox..."); pCheckBox->setText(QString::fromLocal8Bit("三态复选框")); // 开启三态模式 pCheckBox->setTristate(); // 连接信号槽 connect(pCheckBox, SIGNAL(stateChanged(int)), this, SLOT(onStateChanged(int))); 槽函数，判断当前复选框状态，其中包括：选中（Qt::Checked）、半选（Qt::PartiallyChecked）、未选中（Qt::Unchecked）。 void MainWindow::onStateChanged(int state) { if (state == Qt::Checked) // "选中" { m_pLabel->setText("Checked"); } else if(state == Qt::PartiallyChecked) // "半选" { m_pLabel->setText("PartiallyChecked"); } else // 未选中 - Qt::Unchecked { m_pLabel->setText("Unchecked"); } } QSS复选框样式。 QCheckBox{ spacing: 5px; color: white; } QCheckBox::indicator { width: 17px; height: 17px; } QCheckBox::indicator:enabled:unchecked { image: url(:/Images/checkBox); } QCheckBox::indicator:enabled:unchecked:hover { image: url(:/Images/checkBoxHover); } QCheckBox::indicator:enabled:unchecked:pressed { image: url(:/Images/checkBoxPressed); } QCheckBox::indicator:enabled:checked { image: url(:/Images/checkBoxChecked); } QCheckBox::indicator:enabled:checked:hover { image: url(:/Images/checkBoxCheckedHover); } QCheckBox::indicator:enabled:checked:pressed { image: url(:/Images/checkBoxCheckedPressed); } QCheckBox::indicator:enabled:indeterminate { image: url(:/Images/checkBoxIndeterminate); } QCheckBox::indicator:enabled:indeterminate:hover { image: url(:/Images/checkBoxIndeterminateHover); } QCheckBox::indicator:enabled:indeterminate:pressed { image: url(:/Images/checkBoxIndeterminatePressed); } 连接stateChanged()信号和槽函数，当用户点击复选框时，状态发生改变就会调用槽函数。 根据以上样式可写为： AirFrame QCheckBox#switch_Button::indicator:unchecked { image: url(://resource/area/checkbox/close.png); } AirFrame QCheckBox#switch_Button::indicator:checked { image: url(://resource/area/checkbox/open.png); } 以上是更改使用的。

首先在main函数中添加qss的获取方式： QFile styleFile(":/resource/style/ui.qss"); if(!styleFile.open(QFile::ReadOnly)){ qDebug() << "ui.qss open failed"; } QString str =QString( styleFile.readAll()); styleFile.close(); qApp->setStyleSheet(str); 注意此时的qss文件路径是个相对路径，具体的需要自己配置。 需要先将QSS文件加入到资源文件中，然后在QSS文件中填写，具体如下： AreaBasicFrame QLabel#communicatestatusname,QLabel#switchtatusname { background-image: url(":/resource/border/littleborder.png"); } AreaBasicFrame QLabel#power,QLabel#electric { background-image: url(":/resource/border/middleborder.png"); } QCheckBox::indicator:unchecked { image: url(://resource/area/checkbox/close.png); } QCheckBox::indicator:checked { image: url(://resource/area/checkbox/open.png); } 设置控件的方式如以上一样。 正对一些文字的设置可以写为： background-color: #f39c12; color: #ffffff; text-align: center; font-size: 24px; min-width: 220px; min-height: 60px; max-width: 220px; max-height:60px; margin-left: 290px; border-width: 0; border-radius: 5px; border:none; background-image: url(":/set_module_img/resource/image/settingModuleImg/bg_set_1.png"); background-color: transparent; 设置完成后，可以编译运行查看一下效果。